import { NavBar } from 'antd-mobile';
import { Checkbox } from 'antd-mobile'
import './cart.less';

const Cart = () => {
  return (
    <>
      <div className='navCart'>
        <NavBar backArrow={false}>购物车</NavBar>
      </div>
      <div className="cart">
        {/* <!-- 购物车开头 --> */}
        <div className="cart-title">
          <span className="all">共<i>4</i>件商品</span>
          <span className="edit">
            <van-icon className="edit" />
            编辑
          </span>
        </div>

        {/* <!-- 购物车列表 --> */}
        <div className="cart-list">
          <div className="cart-item">
            <Checkbox ></Checkbox >
            <div className="show">
              <img src="http://cba.itlike.com/public/uploads/10001/20230321/a072ef0eef1648a5c4eae81fad1b7583.jpg" alt="" />
            </div>
            <div className="info">
              <span className="tit text-ellipsis-2">新Pad 14英寸 12+128 远峰蓝 M6平板电脑 智能安卓娱乐十核游戏学习二合一 低蓝光护眼超清4K全面三星屏5GWIFI全网通 蓝魔快本平板</span>
              <span className="bottom">
                <div className="price">¥ <span>1247.04</span></div>
                <div className="count-box">
                  <button className="minus">-</button>
                  <input className="inp" type="text" readonly />
                  <button className="add">+</button>
                </div>
              </span>
            </div>
          </div>
        </div>

        <div className="footer-fixed">
          <div className="all-check">
            <van-checkbox icon-size="18"></van-checkbox>
            全选
          </div>

          <div className="all-total">
            <div className="price">
              <span>合计：</span>
              <span>¥ <i className="totalPrice">99.99</i></span>
            </div>
            {/* 条件渲染 */}
            <div v-if="true" className="goPay">结算(5)</div>
            <div v-else className="delete">删除</div>
          </div>
        </div>
      </div >

      {/* 空购物车处理 */}
      <div class="empty-cart" v-else>
        <img src="@/assets/empty.png" alt="" />
        <div class="tips">
          您的购物车是空的, 快去逛逛吧
        </div>
        <div class="btn" >去逛逛</div>
      </div>
    </>

  )
}

export default Cart;